import React, {Component} from 'react';
import {Animated, Easing} from "react-native";

export default class FadeInView extends Component {

  constructor(props) {
    super(props);
    this.breathValue = new Animated.Value(0)
  }

  componentDidMount() {
    this.breath();
  }

  render() {

    const breath = this.breathValue.interpolate({
      inputRange: [0, 1, 2],
      outputRange: [.2, .8, .2]
    });

    return (
      <Animated.View                 // 使用专门的可动画化的View组件
        style={{
          ...this.props.style,
          opacity: breath,
        }}
      >
        {this.props.children}
      </Animated.View>
    );

  }

  breath() {
    this.breathValue.setValue(0);
    Animated.timing(                  // 随时间变化而执行动画
      this.breathValue,            // 动画中的变量值
      {
        toValue: 2,
        duration: 2000,              // 让动画持续一段时间
        easing: Easing.linear,
        useNativeDriver: true
      }
    ).start((isover) => {
      if(isover.finished){
        this.breath()
      }
    });                        // 开始执行动画
  }

}